<template>
  <q-uploader
    auto-upload
    ref="avatarUploader"
    :max-files="props.maxFiles"
    class="hidden"
    :multiple="props.multiple"
    :headers="headers"
    :accept="props.accept"
    :url="uploadUrl"
    field-name="image"
    @uploaded="uploadedAvatar"
  />
  <q-tooltip>点击预览图片</q-tooltip>
</template>
<script setup lang="ts">
import { upload } from '@/api/user';
const avatarUploader = ref();
const headers = [
  {
    name: 'Authorization',
    value: ('Bearer ' + localStorage.getItem('Access-Token')).replace(
      /\"/g,
      ''
    ),
  },
];
interface Props {
  maxFiles?: string;
  accept?: string;
  multiple?: boolean;
}

const props = withDefaults(defineProps<Props>(), {
  maxFiles: '1',
  accept: 'image/*',
  multiple: false,
});

//上传图片
const importAvatar = () => {
  console.log('点击上传', avatarUploader.value);
  avatarUploader.value.pickFiles();
};
//清空内容
const removeUpload = () => {
  console.log('清空');
  avatarUploader.value.removeUploadedFiles();
};
const emit = defineEmits(['uploadedAvatar']);
// const formFields: any = ref([{ name: 'image', value: '' }]);
const uploadUrl = `${process.env.VUE_APP_API_URL}/back${upload}`;
const uploadedAvatar = (xhr: any) => {
  console.log('uploadedAvatar------------');
  emit('uploadedAvatar', xhr);
};
defineExpose({ importAvatar, removeUpload });
</script>
<style></style>
